<template>
  <div class="nav">
    <div>
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      background-color="#004e73"
      text-color="white"
      active-text-color="white"
      :router="true"
      :unique-opened=true
    >
      <el-menu-item index="home"><a>Home</a></el-menu-item>
      <el-menu-item index="committee"><a>Committee</a></el-menu-item>
      <el-menu-item index="program"><a>Program</a></el-menu-item>
      <el-menu-item index="submission"><a>Submission</a></el-menu-item>
      <el-menu-item index="registration"><a>Registration</a></el-menu-item>
      <el-menu-item index="plenary_speakers"><a>Plenary Speakers</a></el-menu-item>
      <!-- <el-menu-item index="award"><a>Award</a></el-menu-item> -->
      <el-submenu index="student">
        <template slot="title">Student</template>
        <el-menu-item index="award">Award</el-menu-item>
        <el-menu-item index="students_travel_support">Students travel support</el-menu-item>
      </el-submenu>
      <el-menu-item index="visitors_venue"><a>Visitors & Venue</a></el-menu-item>
      <!-- <el-menu-item index="awards"><a>Awards</a></el-menu-item> -->
      <el-submenu index="summer_school">
        <template slot="title">Summer School</template>
        <el-menu-item index="summer_school"><a>Summer School</a></el-menu-item>
        <el-menu-item index="other_lectures"><a>Other Lectures</a></el-menu-item>
      </el-submenu>
      <el-menu-item index="contact"><a>Contact</a></el-menu-item>
    </el-menu>
  </div>
  </div>
</template>

<script>
  export default { };
</script>

<style lang="less" scoped>
// @text-color:#000;
@text-color:white;
@nav-size: 18px;

.nav{ width: 100%; }
.el-menu-demo{font-family: Arial,sans-serif;font-weight:bold;}
a{ text-decoration : none; } 
a:visited {color:@text-color;}
a:link {color:@text-color;}

.el-menu-demo{
  li{font-size: @nav-size;}
}

/deep/.el-menu.el-menu--horizontal
{ 
  border-bottom: none;
}
/deep/.el-menu{ 
  display: flex; 
  align-items: center; 
  justify-content: center;
}
/deep/.el-submenu__title { 
  font-size: @nav-size;
  i{color: @text-color;} 
}

// /deep/.el-icon-arrow-down:before{color: white;}

</style>
